<script setup>
import HappyCode from '../../uni_modules/happy-code/components/happy-code/happy-code.vue'
import { ref } from 'vue';
import { uniFetch } from '../../api/uni-fetch';
import { onLoad, onUnload } from '@dcloudio/uni-app';
// 手机号码
const fourNumber = ref('');
function confirmOpen() {
	if (fourNumber.value.length < 4) {
		return uni.showToast({
			icon: 'none',
			title: '请输入完整号码'
		});
	}
	popup.value.open('center');
}

// 弹框
const popup = ref(null);
// 关闭弹窗
function closePopup() {
	popup.value.close();
}

const cabinetId = ref('');
onLoad((option) => {
	cabinetId.value = option.cabinetId;
	getDeviceInfo(option.cabinetId);
});

// 设备信息
const deviceInfo = ref({});
async function getDeviceInfo(box_id) {
	const res = await uniFetch.post('/device/detail', { box_id });
	deviceInfo.value = res.data;
}

// 确认
async function confirmSub() {
	popup.value.close();

	uni.showLoading({
		title: '开门中'
	});

	setTimeout(() => {
		uni.hideLoading();

		uni.navigateTo({
			url: '/subpkg/success/success'
		});
	}, 1500);

	

	// const res = await uniFetch.post('/user/pick', { box_id: cabinetId.value, pickup_code: fourNumber.value });
	// if (res.code === 10000) {
	// 	uni.showLoading({
	// 		title: '开门中'
	// 	});
	// 	if (res.data.lane) {
	// 		uni.hideLoading();
	// 		uni.navigateTo({
	// 			url: '/subpkg_take/success/success?id=' + res.data.lane + '&devicecode=' + cabinetId.value
	// 		});
	// 	}
	// } else {
	// 	uni.showToast({
	// 		title: res.msg,
	// 		icon: 'none'
	// 	});
	// }
}

function outputcode(code) {
	fourNumber.value = code;
}

// 更换柜子
function changeCabinet() {
	uni.scanCode({
		scanType: 'qrCode',
		success: (res) => {
			if (res.result) {
				cabinetId.value = res.result.match(/id=(\w+)/)[1];
			}
		}
	});
}

// const timer = ref();
// onUnload(() => {
// 	clearTimeout(timer.value);
// });
</script>

<template>
	<view class="take-info">
		<view class="miniprograme">{{ deviceInfo.name }}快递柜</view>
		<view class="address">
			<view class="text">{{ deviceInfo.location }}</view>
			<view class="change-scan" @click="changeCabinet">
				<uni-icons type="scan" size="25" style="float: left; margin-top: 0rpx" color="#242424"></uni-icons>
				扫码换柜
			</view>
		</view>

		<view class="input-phone">
			<view class="tip-input">
				<image src="../../static/images/phone.png"></image>
				<view class="title">输入您的取件码</view>
			</view>

			<view class="single-num">
				<HappyCode :digitboxcount="4"  @outputcode="outputcode"></HappyCode>
			</view>
			<view class="open-submit" @click="confirmOpen">确认开柜</view>
		</view>

		<!-- 弹框 -->
		<uni-popup ref="popup" type="center">
			<view class="comfirm-box">
				<view class="notice">
					要取
					<text class="num">
						{{ fourNumber }}
					</text>
					的订单么？
				</view>

				<view class="button">
					<view class="edit" @click="closePopup">取消</view>
					<view class="comfirm" hover-class="comfirm-click" @click="confirmSub">确认无误</view>
				</view>
			</view>
		</uni-popup>

	</view>
</template>

<style lang="scss">
.take-info {
	padding: 20rpx 25rpx 30rpx;
	height: 100vh;
	background-color: #f2f2f2;
	box-sizing: border-box;
	view {
		box-sizing: border-box;
	}

	.miniprograme {
		padding: 55rpx 0 30rpx;
		font-size: 43rpx;
		font-weight: 700;
	}
	.address {
		padding: 22rpx 15rpx;
		height: 90rpx;
		border-radius: 25rpx;
		background-color: #fff;
		font-size: 35rpx;
		// line-height: 80rpx;

		.text {
			max-width: 450rpx;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
			float: left;
			// background-color: pink;
		}
		.change-scan {
			float: right;
			padding-left: 15rpx;
			border-left: #bcbcbc 1rpx solid;
			color: #242424;
		}
	}

	.input-phone {
		margin-top: 25rpx;
		padding: 45rpx 15rpx;
		background-color: #fefefe;
		border-radius: 20rpx;
		box-shadow: 2rpx 2rpx 3rpx 3rpx #f4f4f4;
		.tip-input {
			height: 90rpx;
			display: flex;
			align-items: center;
			font-size: 35rpx;
			vertical-align: middle;
			image {
				float: left;
				height: 40rpx;
				margin: 0 18rpx 0 20rpx;
				width: 40rpx;
			}
			.title {
				letter-spacing: 6rpx;
				float: left;
				line-height: 90rpx;
			}
		}

		.single-num {
			width: fit-content;
			margin: 30rpx auto;
		}
		.open-submit {
			margin: 95rpx auto 35rpx;
			padding-top: 25rpx;
			padding-bottom: 25rpx;
			width: 60%;
			color: #fefefe;
			text-align: center;
			font-size: 40rpx;
			line-height: 45rpx;
			background-color: #32c7aa;
			border-radius: 15rpx;
			border: #3ae1c1 2rpx solid;
		}
	}

	.comfirm-box {
		padding: 45rpx 0;
		background-color: #fefefe;
		width: 600rpx;
		border-radius: 35rpx;

		image {
			display: block;
			margin: 0 auto;
			height: 200rpx;
		}
		.notice {
			margin-top: 20rpx;
			line-height: 65rpx;
			padding-left: 65rpx;
			font-size: 40rpx;
			font-weight: bold;
			text-align: left;
			.num {
				text-align: center;
				line-height: 80rpx;
				font-weight: bold;
				color: #672121;
			}
		}

		.button {
			padding: 20rpx 50rpx 0;
			display: flex;
			justify-content: space-between;

			view {
				border-radius: 40rpx;
				padding: 15rpx 0;
				width: 200rpx;
				text-align: center;
			}
			.edit {
				border: solid 1rpx #d1d1d1;
				color: #4b4b4b;
			}
			.comfirm {
				color: #fefefe;
				background-color: #3ae1c1;
			}
			.comfirm-click {
				background-color: #31c3a6;
			}
		}
	}
}
</style>
